<template>
	<view>
		<mumu-get-qrcode @success='qrcodeSuccess' @error="qrcodeError" v-if="sao" style="width: 100vw;height: 100vh;"></mumu-get-qrcode>
		<image src="./bg.png" class="bg"></image>
		<view class="body">
			<view style="position: relative;padding-top: 150rpx;">
				<image src="./ka.png" class="ka"></image>
				<image src="./shui.png" class="shui"></image>
			</view>
			<view class="title">
				<image class="title-image" src="./zuodian.png"></image>
				<view class="title-text">{{storeId == 0?'转存水票':'捐赠水票'}}</view>
				<image class="title-image" src="./youdian.png"></image>
			</view>
			<view class="item" style="margin: 47rpx auto 30rpx auto;">
				<view class="item-label">存入卡号</view>
				<view class="item-input">
					<view style="flex: 1;" :class="cardNo=='请扫描水卡背后的二维码'?'placeholder':'input'">{{cardNo}}</view>
					<view class="item-btn" @click="goScan" v-if="storeId == 0">扫码转存</view>
				</view>
			</view>
			<view class="item">
				<view class="item-label">存入数量</view>
				<view class="item-input">
					<input class="input" type='number' placeholder="请填写数量"  v-model='ticketNum' maxlength="9" placeholder-class='placeholder'	></input>
				</view>
			</view>
			<view class="tips">
				<view>*当前赠送水票余额:</view>
				<view style="color: #FB8C00;font-weight: bold;padding-left: 8rpx;">{{userInfo.giftWater}}</view>
			</view>
			<view class="tips" v-if="cardNo!='请扫描水卡背后的二维码'">
				<view>*当前水卡还可转入:</view>
				<view style="color: #FB8C00;font-weight: bold;padding-left: 8rpx;">{{canZcNum}}</view>
			</view>
			<view class="btn" @click="save">{{storeId == 0?'确认转存':'确认捐赠'}}</view>
		</view>
		<view class="model" v-if="show">
			<image src="https://watertick.oss-cn-hangzhou.aliyuncs.com/quan2.png" class="model-image" mode="widthFix"></image>
			<view class="price" v-if="show2">
				<view class="price-one">{{voucher}}</view>
				<view class="price-two">元</view>
			</view>
			<view class="icon-cha iconfont cha" @click="show=false;show2=false"></view>
		</view>
	</view>
</template>

<script>
	import {
		storeDetail,
	} from "@/api/store";
	import {
		donate,
		junzeng,
		findUserCanZcNum,
		getUserInfo
	} from "@/api/user.js";
	import {toLogin} from '@/libs/login.js';
	import {mapGetters} from "vuex";
	import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
	export default {
		components: {
			mumuGetQrcode
		},
		data() {
			return {
				sao: false,
				isAllSelect: true,
				success: false,
				info: {},
				cardNo: '请扫描水卡背后的二维码',
				ticketNum: '',
				canZcNum: 0,
				storeId: 0,
				show: false,
				show2: false,
				voucher: 0,
			};
		},
		computed: mapGetters(['isLogin', 'userInfo', 'uid']),
		onLoad(options) {
			if (!this.isLogin) {
				toLogin();
			} else if(options.card) {
				this.cardNo = options.card
				this.storeId = options.id
				this.getNum(this.cardNo)
			}
		},
		onUnload() {
			
		},
		onShow() {
			if (!this.isLogin) {
				toLogin();
			}
		},
		onBackPress(e) {
			
		},
		methods: {
			qrcodeSuccess(data) {
				const list = (data || '').split('-')
				this.sao=false
				this.getNum(list[1])
			},
			qrcodeError(err) {
				console.log(err)
				uni.showModal({
					title: '摄像头授权失败',
					content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
					success: () => {
						// uni.navigateBack({})
					}
				})
			},
			goScan() {
				// #ifdef H5
					this.sao = true
				// #endif
				// #ifndef H5
					uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				// #endif
			
				// uni.navigateTo({
				// 	url: '/pages/users/user_ticket/scan'
				// })
			},
			getNum(cardNo) {
				findUserCanZcNum({
					cardNo,
				}).then(res => {
					this.cardNo = cardNo
					this.canZcNum = res.data
				})
			},
			save() {
				const _this = this
				if (_this.cardNo == '请扫描水卡背后的二维码') {
					_this.$util.Tips({
						title: '请扫描水卡背后的二维码'
					});
					return
				}
				if (_this.ticketNum < 1) {
					_this.$util.Tips({
						title: '请输入转存的数量'
					});
					return
				}
				let msg = _this.storeId == 0?'水卡不可提现，不可挂失，请妥善保管，是否确认转存':'本次捐赠采用记名方式，捐赠后不可取回，是否确认捐赠'
				
				uni.showModal({
					title: '提示',
					content: msg,
					success: function (res) {
						if (res.confirm) {
							if (_this.storeId == 0) {
								donate({
									cardNo: _this.cardNo,
									ticketNum: _this.ticketNum,
								}).then(res => {
									_this.ticketNum = ''
									_this.voucher = res.data || 0
									console.log(res)
									_this.show = true
									setTimeout(()=>{
										_this.show2 = true
									}, 500)
									_this.getNum(_this.cardNo)
									_this.getUserInfo()
								})
							} else {
								junzeng({
									storeId: _this.storeId,
									ticketNum: _this.ticketNum,
								}).then(res => {
									_this.ticketNum = ''
									_this.$util.Tips({
										title: '感谢您的爱心捐赠'
									});
									_this.getNum(_this.cardNo)
									_this.getUserInfo()
								})
							}
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getDetail(options) {
				storeDetail({
					id: options.id,
				}).then(res => {
					this.info = res.data || null
					console.log(this.info)
				})
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$store.commit("UPDATE_USERINFO", res.data);
				});
			},
			
		}
	}
</script>
<style scoped lang='scss'>
	.model-image{
		width: 100vw;
	}
	.cha{
		font-size: 80rpx;
		color: #fff;
		text-align: center;
		transform: translate(0,-200%);
	}
	.price {
		position: fixed;
		z-index: 10;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: flex;
		align-items: baseline;
	}
	.price-one{
		color: #ffdd90;
		font-weight: bold;
		font-size: 150rpx;
	}
	.price-two{
		font-weight: bold;
		color: #ffdd90;
		font-size: 50rpx;
	}
	.model{
		position: fixed;
		background: rgba(0, 0, 0, 0.6);
		top: 0%;
		left: 0%;
		right: 0%;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: 10;
	}
	.btn{
		margin: 170rpx auto 100rpx auto;
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(#FF5539 0%, #F9863B 100%);
		border-radius: 51rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.tips{
		padding: 14rpx 30rpx 0 0;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #CC6F35;
		justify-content: end;
	}
	.placeholder{
		font-size: 28rpx;
		color: #CC6F35;
	}
	.item-btn{
		width: 128rpx;
		height: 50rpx;
		background: #FB8C00;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.item-input{
		display: flex;
		flex: 1;
		align-items: center;
		padding-left: 60rpx;
		.input {
			color: #FA853B;
			width: 100%;
		}
	}
	.item-label{
		font-size: 28rpx;
		color: #FA853B;
	}
	.item{
		width: 690rpx;
		padding: 0 20rpx;
		margin: 0 auto;
		height: 120rpx;
		border-radius: 20rpx;
		border: 1px solid #FB8C00;
		display: flex;
		align-items: center;
	}
	.title{
		margin-top: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		&-image{
			width: 18rpx;
			height: 10rpx;
		}
		&-text{
			font-size: 30rpx;
			color: #FB8C00;
			padding: 0 8rpx;
		}
	}
	.body{
		
		position: relative;
		z-index: 9;
	}
	.shui{
		position: absolute;
		top: 126rpx;
		right: 47rpx;
		width: 212rpx;
		height: 308rpx;
	}
	.ka{
		width: 730rpx;
		margin: 0 auto;
		height: 382rpx;
		display: block;
	}
	.bg{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
	}
</style>